import React from "react";
import '../../Style/fund.css';
import {Icon, NavBar} from "antd-mobile";
import { List, InputItem } from 'antd-mobile';
import { Button } from 'antd-mobile';
import { Picker,WhiteSpace } from 'antd-mobile';
import axios from "axios";

let fundID = window.location.href;
fundID = fundID.toString().split('=');
if (fundID.length == 2){
    fundID = fundID[1] + '';
}

console.log(fundID)



const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
    moneyKeyboardWrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
};

const seasons = [
    [
        {
            label: '银行1',
            value: '银行1',
        },
        {
            label: '银行2',
            value: '银行2',
        },
    ],
    [
        {
            label: '银行卡1尾号',
            value: '银行卡1尾号',
        },
        {
            label: '银行卡2尾号',
            value: '银行卡2尾号',
        },
    ],
];

export default class Fund_buy extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            type: 'money',
            data: [],
            sValue: ['银行1', '银行卡1尾号'],
            fundName:'',
            moneyNum:0,
        };
        axios.get(global.routes.database+'/getFunds', {
            params: {
                fundID: window.location.href.split('=')[1],
            }
        }).then((res)=> {
            console.log(res.data.Data.SHORTNAME)
            this.setState({
                fundName:res.data.Data.SHORTNAME
            });

        })
        console.log(this.state.fundName);
        this.buy=this.buy.bind(this);
    }

    buy(){
        if(this.state.money<10){
            alert('购买金额必须不小于10元');
        }else{
            var dwjz=0;
            var FUNDID=window.location.href.split('=')[1];
            axios.get(global.routes.database+'/getFunds', {
                params: {
                    fundID: FUNDID,
                }
            }).then((res)=>{
                dwjz=res.data.Data.DWJZ;
                var getHands=((this.state.moneyNum/parseFloat(dwjz))*0.98).toFixed(2);
                var getPhoneNum=document.cookie.split('=')[1];
                FUNDID=parseInt(FUNDID);
                axios.get(global.routes.database+'/setUserFund', {
                    params: {
                        fundID: FUNDID,
                        phoneNum:getPhoneNum,
                        hold:this.state.moneyNum,
                        hands:getHands
                    }
                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.Code==0){
                        alert('买入成功！请在“我的资产”查看！');
                        window.location.href = '#/terran/fundbuypass';
                    }else{
                        alert('买入失败！');
                    }
                })
            })
        }
    }

    render() {
        const { type } = this.state;
        return(
            <div>
                <NavBar className="f_r_nav"
                        mode="light"
                        leftContent={[
                            <Icon type="left" />,
                            "返回",
                        ]}
                        onLeftClick={
                            () =>
                                window.location.href = '#/terran/fundrank'
                        }
                >
                    买入
                </NavBar>
                <div style={{width:'100%',height:'10px',marginTop:'50px',background:'rgb(245,245,247)'}}></div>
                <div style={{width:'100%',height:'40px',lineHeight:'40px',fontSize:'18px',margin:'0',padding:'0 0 0 20px',zIndex:'99'}}>
                    {this.state.fundName}</div>
                <div style={{width:'100%',height:'10px',background:'rgb(245,245,247)'}}></div>
                <div style={{width:'100%',margin:'0',padding:'0 0 0 20px'}}>
                    <p style={{width:'100%',height:'40px',lineHeight:'40px',fontSize:'18px',margin:'0',padding:'0'}}>买入金额</p>
                    <InputItem
                    type={type}
                    placeholder="请输入买入金额"
                    clear
                    onChange={v=>this.setState({moneyNum:v})}
                    moneyKeyboardAlign="left"
                    moneyKeyboardWrapProps={moneyKeyboardWrapProps}
                    className="input_buy_money">￥</InputItem>
                </div>
                <div style={{width:'100%',height:'10px',background:'rgb(245,245,247)'}}></div>
                <div>
                    <List style={{ backgroundColor: 'white' }} className="picker-list">
                        <Picker
                            data={seasons}
                            title="选择银行卡"
                            cascade={false}
                            extra="请选择(可选)"
                            value={this.state.sValue}
                            onChange={v => this.setState({ sValue: parseFloat(v).toFixed(2) })}
                            onOk={v => this.setState({ sValue: v })}
                        >
                            <List.Item arrow="horizontal">付款方式</List.Item>
                        </Picker>
                    </List>
                </div>
                <div style={{width:'100%',height:'15px',background:'rgb(245,245,247)',position:'relative'}}></div>
                <Button type={"primary"} className="botton_buy_fund" style={{position:'relative'}}
                        onClick={() => {
                            this.buy();
                        }}>
                    <p>确定</p>
                </Button>
            </div>
        );
    };
};




